<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <meta charset="UTF-8">
    <title>OA-app与H5交互Demo</title>
    <script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
    <script src="/dist/plugins/vue/vue.js"></script>
    <script src="/dist/js/oaApp.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h3>JSBridge Demo</h3>
    </div>

    说明文档: <a href="https://www.showdoc.cc/OAJSBridgeDemo">https://www.showdoc.cc/OAJSBridgeDemo</a>
    <br/>
    <br/>

    界面交互(ui)
    <ul class="list">
        <li>
            <div>
                <button @click="alert(1)">
                    禁用默认alert()
                </button>
                <button @click="confirm(1)">
                    禁用默认confirm()
                </button>
            </div>
        </li>
        <br/>
        <li>
            <div>
                <button @click="showToast('提示内容')">
                    弹出提示
                </button>
                <button @click="showDialog">
                    提示对话框
                </button>
                <div style="font-size: 12px">对话框回调结果:{{dialogResult}}</div>
                <button @click="showInputDialog">
                    Input对话框
                </button>
                <div style="font-size: 12px">input回调结果:{{inputResult}}</div>

                <button @click="enableNavigateBack(true)">
                    启用app返回键
                </button>
                <button @click="enableNavigateBack(false)">
                    禁用app返回键
                </button>

                <button @click="setEnableLongClick(true)">
                    启用app长按
                </button>
                <button @click="setEnableLongClick(false)">
                    禁用app长按
                </button>

            </div>
        </li>
        <li>
            <div>
                <button @click="showLoading">
                    显示加载框, 3秒后自动隐藏加载框
                </button>
            </div>
        </li>
        <br/>
        <li>
            <div>
                <button @click="testThread">
                    点击3s后回调
                </button>
                <button @click="paramSend('1001')">
                    发送消息给原生
                </button>
                <button @click="refresh">
                    刷新本页
                </button>
                <button @click="setUrl">
                    设置页面url
                </button>
                <button @click="setPullRefresh(true)">
                    开启下拉刷新
                </button>
                <button @click="setPullRefresh(false)">
                    关闭下拉刷新
                </button>
                <button @click="setTitleBar(true,'标题啊啊')">
                    显示标题栏
                </button>
                <button @click="setTitleBar(false)">
                    隐藏标题栏
                </button>
            </div>
            <div style="font-size: 12px">回调结果:{{waitResult}}</div>
        </li>
        <br/>
    </ul>

    设备(device)
    <ul class="list">
        <li>
            <div>
                <button @click="makePhoneCall">
                    去拨号界面
                </button>
                <button @click="toApplicationSettings">
                    去应用设置界面
                </button>
            </div>
        </li>
        <br/>
    </ul>


    网络(network)
    <ul class="list">
        <li>
            <div>
                <button @click="getOperatorName">
                    获取运营商
                </button>
                <button @click="getNetworkType">
                    获取网络类型
                </button>
                <button @click="isNetConnected">
                    是否可上网
                </button>
                <button @click="isWifiConnected">
                    是否wifi连接
                </button>
            </div>
        </li>
        <br/>
    </ul>

    屏幕(screen)
    <ul class="list">
        <li>
            <div>
                <button @click="getScreenInfo">
                    获取屏幕信息
                </button>
            </div>
        </li>
        <br/>
    </ul>


    定位(location)
    <ul class="list">
        <li>
            <div>
                <button @click="getLocation">
                    获取定位
                </button>
            </div>
        </li>
        <br/>
    </ul>

    相机(camera)
    <ul class="list">
        <li>
            <div>
                <button @click="takePhoto">
                    拍照
                </button>
                <button @click="chooseAlbum">
                    从相册选择
                </button>
            </div>
        </li>
        <br/>
    </ul>


    路由(router)
    <ul class="list">
        <li>
            <div>
                <button @click="navigateTo">
                    新跳H5页面
                </button>
                <button @click="navigateBack">
                    关闭H5页面
                </button>
                <button @click="navigateToNav">
                    打开原生App页面
                </button>
            </div>
        </li>
        <br/>
    </ul>

    录音(audio)
    <ul class="list">
        <li>
            <div>
                <button @click="speechRecognizer">
                    语音识别
                </button>
            </div>
        </li>
        <br/>
    </ul>

    多媒体(media)
    <ul class="list">
        <li>
            <div>
                <button @click="previewImage">
                    查看图片
                </button>
            </div>
        </li>
        <br/>
    </ul>

    缓存(cache)
    <ul class="list">
        <li>
            <div>
                <button @click="setCache">
                    保存cache
                </button>
                <button @click="getCache">
                    读取cache
                </button>
                <button @click="getCacheSize">
                    读取缓存大小
                </button>
                <button @click="clearCache">
                    清空缓存
                </button>
            </div>
        </li>
        <br/>
    </ul>


    分享(share)
    <ul class="list">
        <li>
            <div>
                <button @click="showShareMenu">
                    分享自选平台
                </button>
                <button @click="showShare">
                    直接分享
                </button>
                <button @click="showShareMiniProgram">
                    分享小程序
                </button>
            </div>
        </li>
        <br/>
    </ul>


    日历(calendar)
    <ul class="list">
        <li>
            <div>
                <button @click="showTimePicker">
                    时间选择
                </button>
            </div>
        </li>
        <br/>
    </ul>

    文件(file)
    <ul class="list">
        <li>
            <div>
                <button @click="showFile">
                    浏览图片文件
                </button>
                <button @click="showFile2">
                    浏览WPS文件
                </button>
                <button @click="uploadFile">
                    上传文件
                </button>
            </div>
        </li>
        <br/>
    </ul>


    调用原生页面(Android)
    <ul class="list">
        <li>
            <div>
                <button @click="showOrg">
                    显示组织机构树
                </button>
                <button @click="showExamFile">
                    显示培训附件预览
                </button>
                <button @click="showInnerFile">
                    显示嵌套图片
                </button>
                <button @click="showInnerFile2">
                    显示嵌套office
                </button>
                <button @click="showInnerFile3">
                    更换嵌套office
                </button>
                <button @click="hideInnerFile">
                    隐藏嵌套
                </button>
            </div>
        </li>
        <br/>
    </ul>

</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            waitResult: "",
            dialogResult: "",
            inputResult: "",
        },
        methods: {


            // ---------------ui-----------------
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            setEnableLongClick:function(isEnable){
                var that = this
                var param = {
                    enableLongClick: isEnable,
                }
                JSBridge.call(UI, 'setEnableLongClick', param)
                if (isEnable) {
                    that.showToast('启用长按')
                } else {
                    that.showToast('禁用长按')
                }
            },
            enableNavigateBack: function (isEnable) {
                var that = this
                var param = {
                    enableNavigateBack: isEnable,
                }
                JSBridge.call(UI, 'setEnableNavigateBack', param)
                if (isEnable) {
                    that.showToast('启用返回键')
                } else {
                    that.showToast('禁用返回键')
                }
            },
            showDialog: function () {
                var that = this
                var param = {
                    title: "提示的标题",
                    content: "提示的内容",
                    cancelText: "no",
                    confirmText: "yes",
                    showCancel: true,
                    cancelable: false
                }
                that.dialogResult = "等待选择..."
                JSBridge.call(UI, 'showDialog', param, function (res) {
                    that.dialogResult = res
                })
            },
            showInputDialog: function () {
                var that = this
                var param = {
                    data: '1',                  //自定义值, 用来区分多个输入弹框使用,回调会原封不动返回本参数和值
                    title: "请输入驳回原因",       //标题
                    hint: "哈哈哈哈或",           //input提示性文字
                    content: "预输入内容",         //预输入内容
                    tipMsg: "请输入驳回内容",      //input内容为空提示
                    confirmText: "确认",         //按钮文字
                    cancelable: true             //点击外部是否可取消
                }
                that.inputResult = "等待输入..."
                JSBridge.call(UI, 'showInputDialog', param, function (res) {
                    that.showToast(res)
                })
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)

                setTimeout(function () {
                    that.hideLoading()
                }, 3000)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            runThread: function () {
                var that = this
                that.waitResult = "执行中..."
                JSBridge.call(UI, 'runThread', {}, function (res) {
                    that.waitResult = res
                })
            },
            paramSend: function (str) {
                var param = {
                    param: str
                }
                JSBridge.call(UI, 'paramSend', param, function (res) {
                })
            },
            setScrollTop: function (isScrollTop) {
                var param = {
                    isScrollTop: isScrollTop
                }
                JSBridge.call(UI, 'setScrollTop', param)
            },
            refresh: function () {
                JSBridge.call(UI, 'refresh')
            },
            setUrl: function () {
                var param = {
                    url: 'https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html', //路径
                }
                JSBridge.call(UI, 'setUrl', param)
                this.showToast("设置新的URL https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html")
            },
            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
                this.showToast(isOpen ? "开启下拉刷新" : "关闭下拉刷新")
            },
            setTitleBar: function (isShow, title) {
                if (!title) {
                    title = ''
                }
                var param = {
                    isShow: isShow, //是否显示标题栏
                    title: title,   //标题文字
                }
                JSBridge.call(UI, 'setTitleBar', param)
                this.showToast(isShow ? "显示标题栏" : "隐藏标题栏")
            },

            // ---------------device-----------------
            makePhoneCall: function () {
                var param = {
                    phoneNumber: "13811111111",
                    isTelVisit: true, //true跳转到电访页面  false跳转到系统拨号页面,
                    name: '张三',   //客户姓名 isTelVisit=true时,选传参数
                }
                JSBridge.call(DEVICE, 'makePhoneCall', param)
            },
            toApplicationSettings: function () {
                JSBridge.call(DEVICE, 'toApplicationSettings', {})
            },


            // ---------------network-----------------
            getOperatorName: function () {
                var that = this
                JSBridge.call(NETWORK, 'getOperatorName', {}, function (res) {
                    that.showToast(res)
                })
            },
            getNetworkType: function () {
                var that = this
                JSBridge.call(NETWORK, 'getNetworkType', {}, function (res) {
                    that.showToast(res)
                })
            },
            isNetConnected: function () {
                var that = this
                JSBridge.call(NETWORK, 'isNetConnected', {}, function (res) {
                    that.showToast(res)
                })
            },
            isWifiConnected: function () {
                var that = this
                JSBridge.call(NETWORK, 'isWifiConnected', {}, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------screen-----------------
            getScreenInfo: function () {
                var that = this
                JSBridge.call(SCREEN, 'getScreenInfo', {}, function (res) {
                    that.showToast(res)
                })
            },


            // ---------------location-----------------
            getLocation: function () {
                var that = this
                JSBridge.call(LOCATION, 'getLocation', {}, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------camera-----------------
            takePhoto: function () {
                var that = this
                var param = {
                    needCrop: false
                }
                JSBridge.call(CAMERA, 'takePhoto', param, function (res) {
                    that.showToast(res)
                })
            },
            // ---------------camera-----------------
            chooseAlbum: function () {
                var that = this
                var param = {
                    title: '选多张照片',
                    multiSelect: true,
                    needCrop: false,
                    needCamera: true,
                    rememberSelected: false,
                    maxNum: 3
                }
                JSBridge.call(CAMERA, 'chooseAlbum', param, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------router-----------------
            navigateTo: function () {
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: '新页面',         //顶部标题
                    url: 'https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html', //路径
                    showTitleBar: true,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            navigateBack: function () {
                var param = {
                    backRefresh: true,       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateBack', param)
            },

            navigateToNav: function () {
                //查看轨迹
                // var param = {
                //     className : ".mod_office.baidutrace.ui.TrackSearchUI",
                //     param : '{"name":"胡小龙","id":"201712162043453A8C7ABEE42C6242BD","date":"2019-05-08"}'
                // }
                //跳转面访
                var param = {
                    className: '.mod_office.interview.ui.InterviewUI',
                    param: '{"name":"张三","tel":"13712341234"}'
                }
                JSBridge.call(ROUTER, 'navigateToNav', param)
            },


            // ---------------audio-----------------
            speechRecognizer: function () {
                var that = this
                JSBridge.call(AUDIO, 'speechRecognizer', {}, function (res) {
                    that.showToast(res)
                })
            },


            // ---------------media-----------------
            previewImage: function () {
                var that = this
                var param = {
                    position: 0,
                    isShowNumber: true,
                    needDownload: false,
                    imgList: 'https://ws2.sinaimg.cn/large/006tKfTcly1g0br8uyeisj30u20u0ad4.jpg,https://ws3.sinaimg.cn/large/006tKfTcly1g0br90xza7j30u00u8n0c.jpg,https://ws1.sinaimg.cn/large/006tKfTcly1g0br9ubqp4j30sg0sgq6t.jpg'
                }
                JSBridge.call(MEDIA, 'previewImage', param, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------cache-----------------
            setCache: function () {
                var param = {
                    key: 'user',
                    value: {
                        name: '张三',
                        tel: '123'
                    }
                }
                JSBridge.call(CACHE, 'setCache', param)
            },

            getCache: function () {
                var that = this
                var param = {
                    key: 'user',
                }
                JSBridge.call(CACHE, 'getCache', param, function (res) {
                    that.showToast(res)
                })
            },

            getCacheSize: function () {
                var that = this
                JSBridge.call(CACHE, 'getCacheSize', {}, function (res) {
                    that.showToast(res)
                })
            },

            clearCache: function () {
                var that = this
                JSBridge.call(CACHE, 'clearCache')
            },


            // ---------------share-----------------
            showShareMenu: function () {
                var that = this
                var param = {
                    title: '哈哈哈',
                    content: '这是内容',
                    imgUrl: 'https://ws2.sinaimg.cn/large/006tKfTcly1g0br8uyeisj30u20u0ad4.jpg',
                    linkUrl: 'https://www.baidu.com/'
                }
                JSBridge.call(SHARE, 'showShareMenu', param, function (res) {
                    that.showToast(res)
                })
            },

            showShare: function () {
                var that = this
                var param = {
                    typeName: 'Wechat', //Wechat  或者  WechatMoments
                    title: '哈哈哈',
                    content: '这是内容',
                    imgUrl: '',
                    linkUrl: ''
                }
                JSBridge.call(SHARE, 'showShare', param, function (res) {
                    that.showToast(res)
                })
            },

            showShareMiniProgram: function () {
                var that = this
                var param = {
                    wxUserName: 'gh_e00723ba1af8',
                    wxPath: 'pages/result/result?id=2019030320004F398BEDB9A970E78446',
                    title: '标题',
                    content: '这是内容',
                    imgUrl: "http://f1.sharesdk.cn/imgs/2014/02/26/owWpLZo_638x960.jpg",
                    linkUrl: 'https://www.baidu.com/',
                    openMiniProgram: false //false需要应用和小程序需要绑定在同一微信开放平台账号下, 不同账号下传true
                }
                JSBridge.call(SHARE, 'showShareMiniProgram', param, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------calendar-----------------
            showTimePicker: function () {
                var that = this
                var param = {
                    title: '请选择',                                       //提示文字
                    startDate: '2018-01-01 00:00:00',                   //开始日期时间
                    endDate: '2020-12-12 00:00:00',                     //结束日期时间
                    //selectedDate: '2019-01-01 12:18:58'                //默认是当前时间
                    showYear: true,                                     //显示年
                    showMonth: true,                                    //显示月
                    showDay: true,                                      //显示日
                    showHour: false,                                     //显示时
                    showMinute: false,                                   //显示分
                    showSecond: false,                                   //显示秒

                }
                JSBridge.call(CALENDAR, 'showTimePicker', param, function (res) {
                    that.showToast(res)
                })
            },
            // ---------------file-----------------
            showFile: function () {
                var that = this
                var param = {
                    url: 'https://office-auto.oss-cn-beijing.aliyuncs.com/images/201811/22/f2eea791327c4477abad43717109f445.jpg',
                }
                JSBridge.call(FILE, 'showFile', param)
            },
            showFile2: function () {
                var that = this
                var param = {
                    url: 'https://office-auto.oss-cn-beijing.aliyuncs.com/images/201811/10/24c0c6abade44b619172224abd1a249e.doc',
                }
                JSBridge.call(FILE, 'showFile', param)
            },
            uploadFile: function () {
                var that = this
                JSBridge.call(FILE, 'uploadFile', {}, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------原生界面-----------------
            showOrg: function () {
                var that = this
                var param = {
                    userId: '201711271733404C9DA1461F2421F828',
                    selectedUserIds: '2017121820434803834AA7E354A82ABB,201711271733404C9DA1461F2421F828,201712182046435C9CBF3D45128DBD09'
                }
                JSBridge.call(UI, 'showOrgTree', param, function (res) {
                    that.showToast(res)
                })
            },

            showExamFile: function () {
                var that = this
                var param = {
                    id: '201711271733404C9DA1461F2421F828',
                }
                JSBridge.call(UI, 'showExamFile', param, function (res) {
                    that.showToast(res)
                })
            },

            showInnerFile: function () {
                var that = this
                var param = {
                    isShow: true,
                    marginTop: 100,
                    marginBottom: 100,
                    url:
                        'http://comic.people.com.cn/NMediaFile/2014/0918/MAIN201409181718000133498879938.jpg,' +
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552629042513&di=fb9471b413c163ec4c58371650e1e58e&imgtype=0&src=http%3A%2F%2Fimg5.hao123.com%2Fdata%2F1_c6f98f97351b555d3eaef16abfd6d0fa_510,' +
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552628733350&di=2099a06d43f235d767e1c6731abd16b8&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fadede5698abd44a805c3aa38d40b5b67c6edc2c6107fc-96IK2i_fw658,' +
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552629042512&di=aef002a960dcb9ca662e7f482a147b1a&imgtype=0&src=http%3A%2F%2Fphoto.tuchong.com%2F3394457%2Ff%2F401147428.jpg'
                }
                JSBridge.call(UI, 'showInnerFile', param, function (res) {
                    that.showToast(res)
                })
            },
            showInnerFile2: function () {
                var that = this
                var param = {
                    isShow: true,
                    url: 'http://office-auto.oss-cn-beijing.aliyuncs.com/images/201801/7/12e6ac38fb3c4ee183844287dcfd1a2a.xlsx',
                }
                JSBridge.call(UI, 'showInnerFile', param, function (res) {

                })
            },
            showInnerFile3: function () {
                var that = this
                var param = {
                    isShow: true,
                    url: 'http://office-auto.oss-cn-beijing.aliyuncs.com/images/201803/14/00069b448bdd4fb1bc9f87de7dc5cafd.xls',
                }
                JSBridge.call(UI, 'showInnerFile', param, function (res) {

                })
            },
            hideInnerFile: function () {
                var that = this
                var param = {
                    isShow: false,
                }
                JSBridge.call(UI, 'showInnerFile', param, function (res) {

                })
            }
        },
    })
</script>
<script>
    //点击app返回键回调
    function onBackPressed(enableNavigateBack) {
        app.showToast('当前是否可返回:' + enableNavigateBack)
    }


    //接收其他页面传递的参数
    function onParamReceived(param) {
        app.showToast('收到参数:' + param)
    }
</script>
<script>
    var isTop = true
    $(window).scroll(function () {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop === 0) {
            isTop = true
            app.setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            app.setScrollTop(false) //非顶部
        }
    })

</script>
</body>
</html>
